<template>
  <div v-if="!ischeck">
    <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000" @tap="goSubjectGood">
      <block v-for="item in banners" :key="item">
        <swiper-item>
          <image :data-itemid="item.id" :data-content="item.content" :src="'http://img.haodanku.com/'+item.app_image" class="slide-image" />
        </swiper-item>
      </block>
    </swiper>
    <div class="index-nav">
      <div class="index-nav-item" @tap="goColumn" v-for="item in nav" :key="item">
        <img :src="item.imgurl" :data-id="item.id" />
        <label>{{item.text}}</label>
      </div>
    </div>
    <div class="pro-title">
      <i class="iconfont icon-youhuiquan"></i>
      <p>每日上新.好券不断</p>
    </div>
    <goodlist :param="param"></goodlist>
  </div>
  <div v-else>
  </div>

</template>

<script>
import goodlist from '@/components/goodlist'
import network from '@/utils/network.js'

export default {
  data () {
    return {
      param: {
        url: '/api/supergooditem/list',
        q: {
          nav: '3',
          min_id: '',
          back: '20'
        }
      },
      banners: [
      ],
      nav: [
        {id: '1', text: '今日上新', imgurl: '/static/images/nav1.png'},
        {id: '2', text: '9.9包邮', imgurl: '/static/images/nav2.png'},
        {id: '3', text: '好券优选', imgurl: '/static/images/nav3.png'},
        {id: '4', text: '人气宝贝', imgurl: '/static/images/nav4.png'},
        {id: '5', text: '品牌爆款', imgurl: '/static/images/nav5.png'}
      ],
      ischeck: true
    }
  },

  components: {
    goodlist
  },

  methods: {
    bindViewTap () {
      const url = '../logs/logs'
      wx.navigateTo({ url })
    },
    goSubjectGood (e) {
      let itemid = e.target.dataset.itemid
      let content = e.target.dataset.content
      let param = {
        url: '/api/supersubjectitem',
        noscroll: true,
        q: {
          id: itemid
        }
      }
      // wx.navigateTo({
      //   url: '../market/market?param=' + JSON.stringify(param)
      // })
      wx.navigateTo({
        url: `../ranklist/ranklist?param=${JSON.stringify(param)}&content= ${content}`
      })
    },
    goColumn (e) {
      let itemid = e.target.dataset.id
      let param = {
        url: '/api/supercolumn',
        q: {
          type: itemid,
          back: '20'
        }
      }
      wx.navigateTo({
        url: '../market/market?param=' + JSON.stringify(param)
      })
    },
    // getUserInfo () {
    //   // 调用登录接口
    //   wx.login({
    //     success: () => {
    //       wx.getUserInfo({
    //         success: res => {
    //           this.userInfo = res.userInfo
    //         }
    //       })
    //     }
    //   })
    // },
    clickHandle (msg, ev) {
      console.log('clickHandle:', msg, ev)
    }
  },

  created () {
    network
      .GET({
        url: '/api/supersubject/list'
      })
      .then(res => {
        this.banners = res.data.data
      })
  },
  // 小程序原生触底方法
  onReachBottom () {
    // this.$ref  为空 mpvue不支持此方法
   // this.$children[0].loadmore()
    getComponentByTag(this, 'goodlist').loadmore()
  },
  onLoad () {
    if (wx.hideTabBar) {
      wx.hideTabBar()
    }
    network
      .GET({
        url: '/api/mpcheckflag'
      })
      .then(res => {
        this.ischeck = res.data
        if (res.data) {
          wx.redirectTo({
            url: '../calc/calc'
          })
        } else {
          wx.showTabBar()
        }
      })
  }
}

// 获取子组件权宜之计 tag -> 子组件名
export const getComponentByTag = (parent, tag) => {
  for (let c of parent.$children) {
    if (c.$options._componentTag === tag) {
      return c
    }
  }
}
</script>

<style lang="less">
swiper-item {
  width: 100%;
  .slide-image {
    width: 100%;
    height: 100%;
  }
}
.index-nav {
  display: flex;
  justify-content: center;
  margin-top: 10rpx;
  margin-bottom: 20rpx;
  .index-nav-item {
    display: flex;
    flex-direction: column;
    width: 20%;
    justify-content: center;
    align-items: center;
    img {
      width: 90rpx;
      height: 90rpx;
    }
    label {
      margin-top: 5rpx;
      font-size: 20rpx;
      color: #696969;
    }
  }
}
.pro-title {
  display: flex;
  padding: 20rpx 0;
  justify-content: center;
  align-items: center;
  background-color: #eeeeee;
  p {
    color: #696969;
    font-size: 30rpx;
    margin-left: 10rpx;
  }
  i {
    font-size: 40rpx;
    color: #eb3d3d;
  }
}
</style>
